<template>
  <div class="">
    <el-dialog v-model="dialogFormVisible" :title="title" width="1000" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="上级分类" prop="pid" :label-width="formLabelWidth">
          <el-tree-select
            v-model="form.pid"
            :data="categoryData"
            check-strictly
            :render-after-expand="false"
            :props="{ label: 'categoryName', children: 'children', value: 'id'}"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName" :label-width="formLabelWidth">
          <el-input v-model="form.categoryName" autocomplete="off" placeholder="请输入分类名称" clearable />
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { tableList, saveOrUpdate, categoryInfo } from '~/api/upload/upload.js'

  const dialogFormVisible = ref(false)
  const title = ref('添加分类')
  const closeOnClickModal = ref(false)
  const categoryData = ref([])
  const formLabelWidth = '80px'
  const formRef = ref(null)

  const emit = defineEmits(['refreshDataList'])
  
  const form = reactive({
    id: 0,
    pid: '',
    categoryName: '',
    sort: 0
  })

  const rules = {
    categoryName: [
      { required: true, message: '分类名称不能为空!', trigger: 'blur' }
    ],
    sort: [
      { required: true, message: '排序不能为空!', trigger: 'blur' }
    ],
    pid: [
      { required: true, message: '上级分类不能为空!', trigger: 'blur' }
    ]
  }

  function initUpload(categoryId) {
    dialogFormVisible.value = true
    // 查询所有分类
    queryAllCategory()
    form.id = 0
    form.pid = ''
    form.categoryName = ''
    form.sort = 0
    if(categoryId) {
      categoryInfo(categoryId).then(res => {
        if(res && res.data.code === 200) {
          const data = res.data.data
          form.id = data.id
          form.categoryName = data.categoryName
          form.pid = data.pid
          form.sort = data.sort
        }
      })
    }
  }
  // 查询所有分类
  function queryAllCategory() {
    tableList().then(res => {
      if(res && res.data.code === 200) {
        categoryData.value = res.data.data
      }
    })
  }
  // 确定
  function onSubmit() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      saveOrUpdate(form).then(res => {
        if(res && res.data.code === 200) {
          dialogFormVisible.value = false
          emit('refreshDataList')
        }
      })
    })
  }

  // 将方法暴露给父组件
  defineExpose({
    initUpload
  })
</script>
<style>
  
</style>
